<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= VUE_APP_PAGE_TITLE %></title>
    <meta name="description" content="<%= VUE_APP_PAGE_DESCRIPTION %>" />
    <style>
      #loading {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .u-loading {
        width: 128px;
        height: 128px;
        display: block;
        margin: 48px;
      }
      .u-loading__symbol {
        padding: 8px;
        animation: loading 3s infinite;
      }
      .u-loading__symbol img {
        display: block;
        max-width: 100%;
        animation: loading-icon 3s infinite;
      }
      @keyframes loading {
        0% {
          transform: perspective(250px) rotateX(0deg) rotateY(0deg);
        }
        50% {
          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
        }
        100% {
          transform: perspective(250px) rotateX(180deg) rotateY(-180deg);
        }
      }
      @keyframes loading-icon {
        0% {
          transform: perspective(250px) rotateX(0deg) rotateY(0deg);
        }
        15% {
          transform: perspective(250px) rotateX(0deg) rotateY(0deg);
        }
        16% {
          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
        }
        50% {
          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
        }
        65% {
          transform: perspective(250px) rotateX(180deg) rotateY(0deg);
        }
        66% {
          transform: perspective(250px) rotateX(180deg) rotateY(180deg);
        }
        100% {
          transform: perspective(250px) rotateX(180deg) rotateY(180deg);
        }
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but mqttx doesn't work properly without JavaScript enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app">
      <div id="loading">
        <div class="u-loading">
          <div class="u-loading__symbol">
            <img src="<%= BASE_URL %>icons/app.png" />
          </div>
        </div>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
